<!--
 * @Author: [dengyih]
 * @Date: 2021-10-25 16:04:51
 * @LastEditors: [dengyih]
 * @LastEditTime: 2021-10-26 15:28:50
 * @Description: 
-->
<template>
  <div class="dashboard-container">
    <!-- 第一部分开始 -->
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="headone">访问量</div>
            <div class="headtwo">
              <span>23,456</span><br />
              <p>日同比 12.5% 周同比 5%</p>
            </div>
            <div class="headthr"><span class="left">总访问量</span> <span class="right">121万</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="headone">周销售额</div>
            <div class="headtwo">
              <span>¥12,000</span>
              <el-progress :percentage="70" :stroke-width="12" style="margin-top:15px"></el-progress>
            </div>
            <div class="headthr"><span class="left">总销售额</span> <span class="right">230万</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="headone">平均评价</div>
            <div class="headtwo">
              <span>4.5</span>
              <div style="margin-top:10px"><el-rate v-model="value1" allow-half="true" disabled="true"></el-rate></div>
            </div>
            <div class="headthr"><span>好评率大于90%</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="headone">用户</div>
            <div class="headtwo">
              <span>123位</span><br />
              <p>日同比 12.5% 周同比 5%</p>
            </div>
            <div class="headthr"><span class="left">总用户</span> <span class="right">23万</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 第一部分结束 -->
    <!-- 第二部分开始 -->
    <div class="center">
      <el-row :gutter="67">
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/用户.png" alt="" style="height:50%" />
            <div>用户</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/分析.png" alt="" style="height:50%" />
            <div>分析</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/标签.png" alt="" style="height:50%" />
            <div>标签</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/消息.png" alt="" style="height:50%" />
            <div>消息</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/票据.png" alt="" style="height:50%" />
            <div>票价</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/订单.png" alt="" style="height:50%" />
            <div>订单</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/产品.png" alt="" style="height:50%" />
            <div>产品</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple">
            <img src="@/assets/首页/配置.png" alt="" style="height:50%" />
            <div>配置</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 第二部分结束 -->
    <!-- 第三部分开始 -->
    <div class="main-box">
      <div class="title">订单量</div>
      <div class="main">
        <h4>订单趋势</h4>
        <div id="container"></div>
      </div>
    </div>
    <!-- 第三部分结束 -->
    <!-- 第四部分开始 -->
    <div class="foot">
      <div class="title">订单分类</div>
      <div class="main">
        <div class="box">
          <img src="@/assets/首页/家庭保洁.png" alt="" />
          <div>家庭保洁</div>
        </div>
        <div class="box">
          <img src="@/assets/首页/家电清洗.png" alt="" />
          <div>家电清洗</div>
        </div>
        <div class="box">
          <img src="@/assets/首页/衣物护理.png" alt="" />
          <div>衣物护理</div>
        </div>
        <div class="box">
          <img src="@/assets/首页/母婴陪护.png" alt="" />
          <div>母婴陪护</div>
        </div>
        <div class="box">
          <img src="@/assets/首页/家具养护.png" alt="" />
          <div>家具养护</div>
        </div>
        <div class="box box1">
          <img src="@/assets/首页/环境整治.png" alt="" />
          <div>环境整治</div>
        </div>
      </div>
      <div id="container2"></div>
    </div>
    <!-- 第四部分结束 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Column, Pie } from '@antv/g2plot'

export default {
  name: 'Dashboard',
  data() {
    return {
      value1: 4.5
    }
  },
  methods: {
    Antv() {
      const data = [
        {
          type: '7月',
          sales: 38
        },
        {
          type: '8月',
          sales: 52
        },
        {
          type: '9月',
          sales: 61
        },
        {
          type: '10月',
          sales: 145
        }
      ]
      const columnPlot = new Column('container', {
        data,
        xField: 'type',
        yField: 'sales',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6
          }
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false
          }
        },
        meta: {
          type: {
            alias: '类别'
          },
          sales: {
            alias: '销售额'
          }
        }
      })

      columnPlot.render()
    },
    anPie() {
      const data = [
        { type: '家庭保洁', value: 27 },
        { type: '家电清洗', value: 25 },
        { type: '衣物护理', value: 18 },
        { type: '母婴陪护', value: 15 },
        { type: '家具养护', value: 10 },
        { type: '环境整治', value: 5 }
      ]

      const piePlot = new Pie('container2', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: v => (v == 100 ? `订单占比` : ` ${v}%`)
          }
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
        },
        statistic: {
          title: {
            offsetY: -8
          },
          content: {
            offsetY: -4
          }
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' }
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' }
              ]
            }
          }
        ]
      })

      piePlot.render()
    }
  },
  mounted() {
    this.Antv()
    this.anPie()
  }
}
</script>

<style lang="scss" scoped>
body {
  padding: 0;
  margin: 0;
}

.dashboard-container {
  .head {
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .bg-purple {
      background: #fff;
      color: #515a6e;
      height: 200px;
      overflow: hidden;
      .headone {
        height: 50px;
        border-bottom: 1px solid #e8eaec;
        padding: 15px;
        color: #000;
      }
      .headtwo {
        height: 100px;
        padding: 15px;

        span {
          font-size: 30px;
        }
        p {
          margin-top: 10px;
        }
      }
      .headthr {
        height: 50px;
        padding: 15px;
        border-top: 1px solid #e8eaec;

        .left {
          float: left;
        }
        .right {
          float: right;
        }
      }
    }
    .grid-content {
      border-radius: 10px;
      min-height: 36px;
    }
  }
  .center {
    margin: 20px 0;
    .bg-purple {
      background: #fff;
      height: 95px;
      border-radius: 4px;
      min-height: 36px;
      text-align: center;
      padding: 15px;
      font-size: 14px;
      color: #515a6e;
      div {
        margin-top: 10px;
      }
    }
    .bg-purple:hover {
      box-shadow: 0 0 10px #999;
    }
  }
  .main-box {
    border-radius: 5px;
    background: #fff;
    .title {
      text-align: center;
      font-size: 24px;
      line-height: 60px;
      border-bottom: 1px solid #e8eaec;
      padding: 15px;
    }
    .main {
      padding: 0 20px;
      #container {
        width: 100%;
        height: 366px;
      }
    }
  }
  .foot {
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;

    .title {
      font-size: 24px;
      text-align: center;
      line-height: 70px;
      border-bottom: 1px solid #e8eaec;
    }
    .main {
      padding: 30px;
      display: flex;

      .box {
        flex: 1;
        height: 100px;
        width: 10%;
        margin-right: 10%;
        background-color: #f5f7f9;
        border-radius: 5px;
        text-align: center;
        padding-top: 20px;
        div {
          padding-top: 10px;
          color: #515a6e;
        }
      }
      .box:hover {
        box-shadow: 0 0 10px;
      }
      .box1 {
        margin-right: 0;
      }
    }
  }
}
</style>
